<template>
    <div>
        <div class="top">
            <div class="core">
                <svg width="130" height="26">
                    <image xlink:href="/static/common/img/logo_black.svg" src="/static/common/img/logo_black.png" width="130" height="26" />
                </svg>
                <div class="btn right" @click="toLogin">教师登录</div>
            </div>
        </div>
        <div class="banner">
            <div class="core">
                <div class="txt">
                    <p class="txt1">专注新高考</p>
                    <p class="txt1">让排课选课更高效</p>
                    <p class="txt2">第3代走班排课算法，节省70%调课时间；10秒分班，智能生成走班人数最小方案；信息化选课系统，专业数据统计，教务管理更高效</p>
                </div>
                <div class="img_box">
                    <svg width="130" height="26">
                        <image xlink:href="/static/common/img/index_ai.svg" src="/static/common/img/index_ai.png" />
                    </svg>
                </div>
            </div>
            <img src="" alt="">
        </div>
        <div class="item1 product">
            <div class="core">
                <p class="item_txt1">产品体系</p>
                <p class="item_txt2">基于3年浙江新高考服务经验，打造选/分/排/考勤全流程解决方案</p>
                <ul>
                    <li class="crad1">
                        <svg width="38" height="34">
                            <image xlink:href="/static/common/img/choice_icon.svg" src="/static/common/img/choice_icon.png" width="38" height="34" />
                        </svg>
                        <p>选课</p>
                        <p>大数据辅助选课决策<br>未来尽在掌</p>
                    </li>
                    <li class="crad2">
                        <svg width="38" height="34">
                            <image xlink:href="/static/common/img/division_icon.svg" src="/static/common/img/division_icon.png" width="38" height="34" />
                        </svg>
                        <p>分班</p>
                        <p>智能分班引擎<br>实现资源最大化利用</p>
                    </li>
                    <li class="crad3">
                        <svg width="38" height="34">
                            <image xlink:href="/static/common/img/array_icon.svg" src="/static/common/img/array_icon.png" width="38" height="34" />
                        </svg>
                        <p>排课</p>
                        <p>各种人性化规则设置<br>一键排出您想要的课表"</p>
                    </li>
                    <li class="crad4">
                        <svg width="38" height="34">
                            <image xlink:href="/static/common/img/clock_icon.svg" src="/static/common/img/clock_icon.png" width="38" height="34" />
                        </svg>
                        <p>考勤</p>
                        <p>坐着听课就能完成的<br>考勤体验</p>
                    </li>
                    <li class="crad5">
                        <svg width="38" height="34">
                            <image xlink:href="/static/common/img/platform_icon.svg" src="/static/common/img/platform_icon.png" width="38" height="34" />
                        </svg>
                        <p>开放平台</p>
                        <p>智慧校园的基础平台<br>保障</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="item2 service">
            <div class="bg2">
                <svg width="684" height="256">
                    <image xlink:href="/static/common/img/bgdot.svg" src="/static/common/img/bgdot.png" width="684" height="256" />
                </svg>
            </div>
            <div class="core">
                <p class="item_txt1">服务体系</p>
                <p class="item_txt2">辰知团队核心能力之一，让学校更轻松</p>
                <div class="crad1">
                    <div class="txt">
                        <div class="tit">
                            提出需求
                        </div>
                        <p>
                            教学副校长、教务主任、任课老师等不同角色的用户，可随时提出方案咨询、落地指导、业务委托、技术支持等业务要求
                        </p>
                    </div>
                    <div class="icon">
                        <svg width="60" height="60">
                            <image xlink:href="/static/common/img/school_icon.svg" src="/static/common/img/school_icon.png" width="60" height="60" />
                        </svg>
                        <span>校方</span>
                    </div>
                </div>
                <div class="crad3"></div>
                <div class="crad2">
                    <div class="txt">
                        <div class="tit">
                            提出需求
                        </div>
                        <p>
                            教学副校长、教务主任、任课老师等不同角色的用户，可随时提出方案咨询、落地指导、业务委托、技术支持等业务要求
                        </p>
                    </div>
                    <div class="icon">
                        <svg width="60" height="60">
                            <image xlink:href="/static/common/img/system_icon.svg" src="/static/common/img/system_icon.png" width="60" height="60" />
                        </svg>
                        <span>系统</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="lastFoot">Copyright&copy;2018&nbsp;&nbsp;陕西特辰信息技术有限公司&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.miitbeian.gov.cn">陕ICP备17015294号-1</a>&nbsp;&nbsp;|&nbsp;&nbsp;<img src="/static/common/img/mark.png" style="">陕公网安备<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61019002000476">61019002000476</a>号</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            toLogin() {
                this.$router.push({path: '/login'})
            },
        }
    }
</script>

<style scoped>
    .core {
        width: 1200px;
        margin: 0 auto;
    }

    .top {
        height: 70px;
    }

    .top .core {
        padding-top: 22px;
    }

    .btn {
        margin-top: -10px;
        background: #fff;
        border: 1px solid #33c4d1;
        color: #33c4d1;
    }

    .banner {
        height: 538px;
        margin-bottom: 152px;
    }

    .banner .core {
        position: relative;
    }

    .banner .txt {
        float: left;
        margin: 155px 88px 0 0;
        width: 526px;
    }

    .banner .txt1 {
        font-size: 38px;
        font-weight: 900;
        line-height: 50px;
	    color: #4a4a4a;
    }

    .banner .txt2 {
        margin-top: 34px;
        font-size: 16px;
        line-height: 29px;
        color: #667988;
    }

    .banner .img_box {
        position: absolute;
        right: 0;
    }

    .img_box svg, .img_box img {
        width: 622px;
        height: 470px;
    }

    .item1, .item2 {
        text-align: center;
        padding-bottom: 200px;
        overflow: hidden;
    }

    .item_txt1 {
        font-size: 24px;
        font-weight: 900;
        color: #4a4a4a;
        margin-bottom: 10px;
    }

    .item_txt2 {
        font-size: 14px;
        color: #667988;
        margin-bottom: 100px;
        font-weight: 500;
    }

    .item1 li {
        width: 185px;
        height: 165px;
        float: left;
        margin-right: 68px;
        padding-top: 5px;
        box-sizing: border-box;
    }

    .item1 li:last-of-type {
        margin: 0;
    }

     .item1 li p:first-of-type {
        font-size: 18px;
        font-weight: 900;
        color: #4a4a4a;
        margin:35px 0 15px;
     }

     .item1 li p:last-of-type {
        font-size: 14px;
        line-height: 24px;
        color: #667988;
     }

    .item2 {
        position: relative;
    }

    .bg2 {
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
    }

    .item2 .crad1, .item2 .crad2 {
        width: 546px;
        float: left;
    }

    .item2 .crad2 {
        float: right;
    }

    .item2 .crad3 {
        float: left;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: #eef3f9;
        border-right: 0;
        margin: 75px 47px 0;
    }

    .item2 .txt {
        background: #f6f9fc;
        padding: 39px 53px 0;
        box-sizing: border-box;
        width: 546px;
        height: 169px;
        margin-bottom: 40px;
    }

    .item2 .tit {
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 17px;
        color: #667988;
        border-radius: 5px;
    }

    .item2 .txt p {
        font-size: 14px;
        line-height: 28px;
	    color: #667988;
    }

    .icon {
        height: 65px;
    }

    .icon svg, .icon image {
        vertical-align: middle;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 30px;
    }

    .icon span {
        vertical-align: middle;
        margin-left: 10px;
	    font-size: 18px;
	    color: #667988;
    }

    .footer {
        height: 59px;
        line-height: 59px;
    }
    /*页脚备案*/
    .lastFoot img{
        vertical-align: middle;
        margin-right: 5px; 
        height: 17px;
        margin-top: -2px;
    }

    .lastFoot a{
        color: #ccc;
    }

    .lastFoot a:hover{
        color: #ccc;
        text-decoration: underline;
    }

    .lastFoot a:visited{
        color: #ccc;
    }

    .lastFoot {
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #c8c8c8;
        font-size: 14px;
        border-top: 1px #f0f0f0 solid;
    }
</style>